<template>
  <div
    class="accordion"
    :style="{
      width: limitAllWidth == 0 ? width + 'px' : limitAllWidth + 'px',
      height: height + 'px',
      lineHeight: titleCenter ? titleHeight + 'px' : '',
      '--imgWidth': imgWidth + 'px',
      '--lastImg': lastImg + 'px',
      '--imgSpace': limitSpace == 0 ? imgSpace + 'px' : limitSpace + 'px',
      '--hoverSpace': limitHover == 0 ? hoverSpace + 'px' : limitHover + 'px',
      '--AllFontSize': fontSize + 'px',
      '--AllFontColor': fontColor,
      '--AllHoverFontColor': hoverFontColor,
      '--AllHoverFontSize': hoverFontSize + 'px',
      '--AllHoverTitleHeight': hoverTitleHeight + 'px',
      '--titleHeight': titleHeight + 'px',
      '--showTitle': showTitle ? 'block' : 'none',
      '--isHoverTitleHeight': titleCenter
        ? hoverTitleHeight + 'px'
        : titleHeight + 'px',
    }"
  >
    <ul ref="ulRef">
      <slot></slot>
    </ul>
  </div>
</template>
<script lang="ts">
export default {
  //组件名称
  name: "ls-accordion",
};
</script>
<script lang="ts" setup scoped>
import { ref, onMounted, watch } from "vue";

interface Props {
  width?: number | string;
  height?: string | number;
  imgSpace?: string | number;
  hoverSpace?: number | string;
  fontSize?: number | string;
  fontColor?: number | string;
  hoverFontColor?: number | string;
  hoverFontSize?: number | string;
  titleHeight?: number | string;
  hoverTitleHeight?: number | string;
  showTitle?: boolean;
  titleCenter?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  width: "1200",
  height: "350",
  imgSpace: "200",
  hoverSpace: "300",
  fontSize: "16",
  fontColor: "#fff",
  hoverFontColor: "#67c23a",
  titleHeight: "100",
  hoverFontSize: "20",
  hoverTitleHeight: "150",
  showTitle: false,
  titleCenter: false,
});

const ulRef = ref<HTMLDivElement | null | any>();
const limitSpace = ref(0); /* 限制图片间隔 */
const liNum = ref<any>(0); /* 图片数量 */
const imgWidth = ref(); /* 图片宽度 */
const lastImg = ref(); /* 最后一张图片 */
const limitAllWidth = ref(0); /* 所有宽度 */
const limitHover = ref(0); /* 限制图片放大间隔 */
// const imgSpace=ref("")/* 图片间隔 */

const show = () => {
  const liNodes = ulRef.value ? ulRef.value.querySelectorAll("li") : [];
  console.log(`Number of <li> nodes: ${liNodes.length}`);

  liNum.value = liNodes.length;
  lastImg.value = Number(props.width) * 0.3;
  /* 图片间距 */
  if (
    (liNum.value - 1) * Number(props.imgSpace) + lastImg.value >
    props.width
  ) {
    limitSpace.value =
      (Number(props.width) - lastImg.value) / (liNum.value - 1);
  } else {
    limitSpace.value = 0;
  }
  /* 总宽度 */
  if (
    props.width >
    lastImg.value + Number(props.imgSpace) * (liNum.value - 1)
  ) {
    limitAllWidth.value =
      lastImg.value + Number(props.imgSpace) * (liNum.value - 1);
  } else {
    limitAllWidth.value = 0;
  }
  console.log(lastImg.value + Number(props.imgSpace) * (liNum.value - 1));
  /* 图片放大间距 */
  console.log(
    Number(props.hoverSpace) + Number(props.imgSpace) * (liNum.value - 1),
    lastImg.value + Number(props.imgSpace) * (liNum.value - 1),
    Number(props.width) - Number(props.imgSpace) * (liNum.value - 1),
    Number(props.imgSpace) * (liNum.value - 1),
    props.width
  );

  if (
    Number(props.hoverSpace) + Number(props.imgSpace) * (liNum.value - 1) >
    lastImg.value + Number(props.imgSpace) * (liNum.value - 1)
  ) {
    limitHover.value = 1160 - Number(props.imgSpace) * (liNum.value - 1);
  } else {
    limitHover.value = 0;
  }
};

/* 监测li节点变化 */
const observeListChanges = () => {
  const observer = new MutationObserver((mutationsList) => {
    for (const mutation of mutationsList) {
      if (mutation.type === "childList") {
        liNum.value = ulRef.value?.querySelectorAll("li").length;
      }
    }
  });

  observer.observe(ulRef.value, { childList: true });

  // 注意：在组件销毁时需要断开观察器，以避免内存泄漏
  return () => observer.disconnect();
};
onMounted(() => {
  show();
  observeListChanges();
});
watch(
  () => [props.imgSpace, props.width, liNum.value, props.hoverSpace],

  (newVal: any, oldVal) => {
    lastImg.value = newVal[1] * 0.3;
    if (newVal[0] * (liNum.value - 1) + lastImg.value > newVal[1]) {
      limitSpace.value = (newVal[1] - lastImg.value) / (liNum.value - 1);
    } else {
      limitSpace.value = 0;
    }

    if (newVal[1] > lastImg.value + newVal[0] * (liNum.value - 1)) {
      limitAllWidth.value = lastImg.value + newVal[0] * (liNum.value - 1);
    } else {
      limitAllWidth.value = 0;
    }

    if (
      Number(newVal[3]) + newVal[0] * (liNum.value - 1) >
      lastImg.value + newVal[0] * (liNum.value - 1)
    ) {
      limitHover.value = 1160 - newVal[0] * (liNum.value - 1);
      console.log("da", limitHover.value);
      console.log(
        limitHover.value == 0 ? newVal[3] + "px" : limitHover.value + "px"
      );
    } else {
      limitHover.value = 0;
    }
  }
);
</script>

<style lang="scss" scoped>
$imgWidth: 300px;
$lastImg: 100px;
$imgSpace: 100px;
$hoverSpace: 300px;
$fontSize: 80px;
$fontColor: #fff;
$hoverFontColor: #fff;
$titleHeight: 100px;
$hoverFontSize: 30px;
$hoverTitleHeight: 200px;
$showTitle: none;
$isHoverTitleHeight: "";
:root {
  --imgWidth: #{$imgWidth};
  --lastImg: #{$lastImg};
  --imgSpace: #{$imgSpace};
  --hoverSpace: #{$hoverSpace};
  --AllFontSize: #{$fontSize};
  --AllFontColor: #{$fontColor};
  --AllHoverFontColor: #{$hoverFontColor};
  --AllHoverFontSize: #{$hoverFontSize};
  --AllHoverTitleHeight: #{$hoverTitleHeight};
  --titleHeight: #{$titleHeight};
  --showTitle: #{$showTitle};
  --isHoverTitleHeight: #{$isHoverTitleHeight};
}
.accordion {
  display: flex;
  justify-content: center;
  align-items: center;
  /* 使页面占屏幕总高 */

  /* 背景的渐变色 */
  background-image: linear-gradient(#70e, #f57);

  ul {
    list-style: none; //去掉标签默认的左边符号
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    /* 超出部分隐藏 */
    overflow: hidden;
    /* 过渡为0.3秒 */
    transition: all 0.3s;
  }
}
.accordion ul :deep li p {
  font-size: var(--AllFontSize);
  color: var(--AllFontColor);
  height: var(--titleHeight);
  display: var(--showTitle);
}
.accordion ul :deep li p:hover {
  font-size: var(--AllHoverFontSize);
  color: #67c23a;
  line-height: var(--isHoverTitleHeight);
}

/* 鼠标移入时让所有的li宽度变为90px */

/* 鼠标移入时让当前的宽度变为640px */
.accordion ul :deep li:hover {
  width: var(--hoverSpace);
}

.accordion ul :deep li p:hover {
  height: var(--AllHoverTitleHeight);
}
.accordion ul :deep li:last-child p {
  width: var(--lastImg);
}
.accordion ul :deep li:last-child p :hover {
  width: var(--hoverSpace);
}
.accordion ul :deep :last-child img {
  height: 100%;
  width: var(--lastImg);
}
.accordion ul :deep :not(:last-child) img {
  height: 100%;
  width: var(--imgWidth);
}

.accordion ul :deep .accordion-item {
  width: var(--imgSpace);
}
</style>
